<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>随心记账-Record</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
    <div class="text-center">
        <h1>用户列表</h1>
        <form th:action="@{/index}" method="get" class="d-flex justify-content-center gap-2 mb-3">
            <input type="text" name="username" placeholder="按姓名搜索" th:value="${param.username}" class="form-control">
            <input type="text" name="email" placeholder="按邮箱搜索" th:value="${param.email}" class="form-control">
            <button type="submit" class="btn btn-primary">搜索</button>
            <a href="/" class="btn btn-secondary">清空</a>
        </form>
    </div>
    <table class="table table-bordered" th:if="${users != null and not #lists.isEmpty(users)}">
        <thead>
        <tr>
            <th>用户名</th>
            <th>电子邮件</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}" th:if="${user != null}">
<!--            <td th:text="${user.id}">1</td>-->
            <td th:text="${user.username}">张三</td>
            <td th:text="${user.email}">zhangsan@example.com</td>
<!--            <td th:text="${user.balance}">100.00</td>-->
        </tr>
        </tbody>
    </table>
    <div th:if="${users == null or #lists.isEmpty(users)}">
        <p>没有找到用户数据。</p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>